<template>
  <div class="container">
    <!-- 工作经验，专业，婚姻状态 -->
    <div class="title">求职意向</div>
    <ul>

      <li>
        <span>目前状态<span class="font_red_light">*</span></span>
          <input @click="showPicker(stateType,'stateTypeInput')" type="text" name="name" placeholder="选择性别" v-model="stateTypeInput" readonly>
          <span @click="showPicker(stateType,'stateTypeInput')" >></span>
          <popup-picker :col="col" :models="models" ref="minePopup" @getSelectValue="getSelectValue"></popup-picker>
      </li>
      <li style="margin-top:20px">
          <div class="picker">
            <span>期望岗位<span class="font_red_light">*</span></span>
            <input @click="showClassifyList" type="text" name="name" placeholder="选择期望行业/岗位" v-model="industryInput" readonly>
            <span @click="showClassifyList">></span>
          </div>
          <popup-picker ref="classify" :col="classifyData" columns_type='mulColumns' @getSelectValue="getSelectValue1"></popup-picker>
        
      </li>
      <!-- <li>
        <picker mode="selector"  :range="moneyType" @change="moneySelect">
          <div class="picker">
            <span>薪资类型<span class="font_red_light">*</span></span>
            <span class="picker_inner">
              <input type="text" name="name" placeholder="选择薪资类型" v-model="moneyTypeInput" >
              <div class="arrow">></div>
            </span>
          </div>
        </picker>
      </li> -->
      <li>
        <span>薪资类型</span>
        <input  @click="showPicker(moneyType,'moneyTypeInput')" type="text" name="name" placeholder="选择薪资类型" v-model="moneyTypeInput" readonly>
        <span @click="showPicker(moneyType,'moneyTypeInput')">></span>
        <popup-picker :col="col"  ref="minePopup" @getSelectValue="getSelectValue" :models="models"></popup-picker>
      </li>
      <li>
        <span>薪资金额<span class="font_red_light">*</span></span>
        <input type="tel" name="name" placeholder="请填写薪资金额" v-model="money" >元
      </li>
      <li>   
          <span>工作地区<span class="font_red_light">*</span></span>
          <input @click="showpopupArea" type="text" name="name" placeholder="选择公司地址" v-model="workAddressInput" readonly>
          <span @click="showpopupArea">></span>
          <popup-picker ref="area" :col="areaList" columns_type='area' @getSelectValue="getAreaValue"></popup-picker>
      </li> 
      <div class="commit" @click="commit">
        <div>保存</div>
      </div>
    </ul>
  </div>
</template>

<script>
import popupPicker from '@/components/popupPicker';
import {Toast} from 'vant';
import areaList from '@/assets/area'
export default {
  data () {
    return {
      areaList,
      col:[],
      models:[], 
      showArea:true, 
      classifyData:{},
      classifyDataId:{},    
      workRegion: ['', '', ''],   //工作地址选项
      classifyTwoData:[['杭州', '宁波', '温州', '嘉兴', '湖州'],['福州', '厦门', '莆田', '三明', '泉州'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物']],
      classifyTwoArr:[],
      classifyTwoId:"",
      classifyIndex: [0, 0],
      classifyOneData:[[]],
      classifyOneArr:[],
      classifyOneId:"",
      moneyType:['日薪','计件','月薪','年薪'],   //薪资类型
      stateType:['我目前已离职，可快速到岗','我目前在职，考虑换个新环境','观望有好的机会再考虑','目前暂无跳槽打算','应届毕业生'],
      workAddressInput:"",   //工作地址详情显示
      industryInput:"",//期望行业显示
      moneyTypeInput:"",//薪资类型显示
      stateTypeInput:"",//目前状态显示
      money:"",     //薪资数量

    }
  },
  components:{
    popupPicker
  },
  methods: {
    getSelectValue(val,model){
      this[model]=val
    },
    showPicker(col,mod){
      this.$refs.minePopup.$data.showArea=true;
      this.col=col;
      this.models=mod
    },
    showClassifyList(){
      this.$refs.classify.$data.showArea=true;
    },
    classifySelect(e){  //获取期待的行业/岗位
      this.classifyOneId=this.classifyOneArr[this.classifyIndex[0]]
      this.classifyTwoId=this.classifyTwoArr[this.classifyIndex[0]][this.classifyIndex[1]]
      this.industryInput=this.classifyTwoData[this.classifyIndex[0]][this.classifyIndex[1]]
      if(e.target.column==0)  //当第一列数据改变时才实现更新第二列数据
      {
        this.$set(this.classifyOneData,1,this.classifyTwoData[e.target.value]) //实现第一列和第二列数据的联动
        this.$set(this.classifyIndex,0,e.target.value)  //改变选择器第一列选择的内容
        this.$set(this.classifyIndex,1,0)  //当改变第一列的时候，第二列的内容初始化为第一个被选中
        this.classifyOneId=this.classifyOneArr[this.classifyIndex[0]]
        this.classifyTwoId=this.classifyTwoArr[this.classifyIndex[0]][0]
      } 
      else if(e.target.column==1){//改变选择器第二列选择的内容
        this.$set(this.classifyIndex,1,e.target.value)  
        this.classifyTwoId=this.classifyTwoArr[this.classifyIndex[0]][this.classifyIndex[1]]
      }
    },
    async getInformation(){  //获取个人简历信息
      let res=await this.$axios('/resume/getUserResume')
      let data=res.data.data;
      if(res.data.level=='success'){
        this.workRegion[0]=data.province ||''
        this.workRegion[1]=data.city || ''
        this.workRegion[2]=data.area || ''
        if(this.workRegion[0]){
          this.workAddressInput=data.province+""+data.city+""+data.area
        }
        this.moneyTypeInput=data.expected_salary_type 
        this.money=data.expected_salary ||''
        this.industryInput=data.job_name || ''
        this.stateTypeInput=data.job_status || ''
        this.classifyTwoId=data.job_type_id
      }
    },
    async commit(){  //提交简历信息
    if(this.stateTypeInput==''){
      Toast('目前工作状态不能为空')
      return
      }else if(this.moneyTypeInput==''){
        Toast('薪资类型不能为空')
        return
      }else if(this.money==''){
        Toast('薪资金额不能为空')
        return
      }else if(this.workAddressInput==''){
        Toast('工作地区不能为空')
        return
      }
      let res=await this.$axios.post('/resume/addResume',{
        type:'job_intention',
        province:this.workRegion[0],
        city:this.workRegion[1],
        area:this.workRegion[2],
        job_type_id:this.classifyTwoId,
        expected_salary_type:this.moneyTypeInput,
        expected_salary:this.money,
        job_status:this.stateTypeInput
        })
      if(res.data.level=='success'){
        this.$currency.showToast('填写成功',1500,'success')
        setTimeout(()=>{
          this.$router.go(-1)
        },1500)
      }else{
        this.$currency.showToast(res.data.message,1500,'fail')
      }
    },
    async getClassifyData(){//获取期待岗位
       let res=await this.$axios('/position/getIndustryList',"");
       let obj={},obj2={};
      let data=res.data.data;
      for(let p in data){
        let name=data[p].name
        let jobArr=[],jobArr2=[]
        data[p].job.forEach((value)=>{
          let obj2={[value.name]:value.id};
          jobArr.push(value.name)
          jobArr2.push(obj2)
        })
        obj[name]=jobArr //用于传进picker的对象数据
        obj2[name]=jobArr2 //用于选中相应的picker时，匹配相应的id
      }
      this.classifyData=obj;
      this.classifyDataId=obj2;
    },
    getSelectValue1(e){//返回该职业的id值
      for(let p in this.classifyDataId){
        if(p==e[0]){
          let jobArr=this.classifyDataId[p]
          for(let k in jobArr){
            if(Object.keys(jobArr[k])[0]==e[1]){
              // console.log(Object.values(jobArr[k])[0])
              this.classifyTwoId= Object.values(jobArr[k])[0] 
              this.industryInput=e[1]
            }
          }
        }
      }
    },
    showpopupArea(){
      this.$refs.area.$data.showArea=true;
    },
    getAreaValue(e){
      // this.workAddressInput
      this.workRegion[0]=e[0].name
        this.workRegion[1]=e[1].name
        this.workRegion[2]=e[2].name
        this.workAddressInput=this.workRegion[0]+this.workRegion[1]+this.workRegion[2]
      
    }
  },
  mounted(){
    
    this.getClassifyData();  //初始化选择器的数据
  },
  activated() {
    this.getInformation()
  },
}
</script>

<style scoped>
.title{width: 100%;height: 51px;line-height: 51px;text-align: center;font-size: 22px;color: #000000;background-color: #fff;margin-bottom: 5px;}
.container{padding-bottom:89px;background-color: #F8F8FB}
.container ul{width: 100%;}
.container ul li{width: 100%;display: flex;justify-content: row;padding: 15px 0px;background-color: #fff;margin-bottom: 2px;}
.container ul li span:nth-of-type(1){width: 100px;font-size: 17px;color: #000000;padding-left: 25px;}
.container ul li input{width: 223px;border: 0px;font-size: 15px;color: #B2B2B9;}
.container ul li span:nth-of-type(2){margin-right: 10px;font-size: 20px;color:#B2B2B9;}
.commit{position: fixed;bottom: 0px; left: 0px;width: 100%;height: 73px;background-color: #F8F8FB;z-index: 99}
.commit div{width: 345px;height: 48px;text-align: center;line-height: 48px;background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);border-radius: 8px;margin: 12.5px auto;color: #FFFFFF;}
picker,.picker{width: 100%;height: 100%;display: flex;justify-content: row;}
.addImg{width: 51px;height: 51px;}

.picker_inner{position: relative;display: flex;height: auto;}
.picker_inner:after{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  z-index:999;
}
.arrow{margin-right: 10px;font-size: 20px;color:#B2B2B9;float:right;width:auto!important}

.font_red_light{color:red !important;padding-left:5px !important;}
</style>
